<template>
  <div>
    <div v-if="whetherSign == 0">
      <div class="sign" v-if="haveBank">
        <p>暂未生成签约及分期数据，请先签约再生成！</p>
        <el-button type="primary" style="width: 240px" @click="openSgin"
        >开始在线签约
        </el-button
        >
      </div>
      <div class="sign" v-else>
        <p>暂未录入银行卡数据，请先填写银行卡信息！</p>
        <el-button type="primary" style="width: 240px" @click="openBank"
        >开始填写
        </el-button
        >
      </div>
    </div>
    <div v-if="whetherSign == 1">
      <div class="sign">
        <p>本订单已完成网签约</p>
        <p>签约时间：{{ signingTime }}</p>
        <!-- <el-button type="primary" style="width:240px" @click="viewContract"
        >查看合同</el-button
      > -->
      </div>
    </div>
    <el-dialog
      title="填写银行卡信息"
      :visible.sync="dialogBank"
      width="500px"
      :before-close="handleCloseBank"
    >
      <div class="bank_con">
        <el-form :model="formBank">
          <el-form-item label="开户行：">
            <el-input
              v-model="formBank.bankType"
              autocomplete="off"
              placeholder="请填写开户行"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行卡号：">
            <el-input
              v-model="formBank.bankNum"
              autocomplete="off"
              placeholder="请填写银行卡号"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseBank">取 消</el-button>
        <el-button type="primary" @click="bankSign">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="在线签约"
      :visible.sync="dialogVisible"
      width="1350px"
      :before-close="handleClose"
      class="dialog_sign"
    >
      <div class="dialog">
        <!-- 第一步 -->
        <div class="sign_step">
          <p class="sign_Title">第一步：基本信息核对</p>
          <div>
            <el-form size="small">
              <el-form-item label="姓名：" :model="form" prop="name">
                <span>{{ form.name }}</span>
              </el-form-item>
              <el-form-item label="身份证号" :model="form" prop="idCard">
                <span>{{ form.idCard }}</span>
              </el-form-item>
              <el-form-item label="手机号：" :model="form" prop="phoneNumber">
                <span>{{ form.phoneNumber }}</span>
              </el-form-item>
              <el-form-item
                label="代扣银行卡号："
                :model="form"
                prop="bankCardNumber"
              >
                <span>{{ form.bankCardNumber }}</span>
              </el-form-item>
              <el-form-item label="开户行：" :model="form" prop="bankDeposit">
                <span>{{ form.bankDeposit }}</span>
              </el-form-item>
            </el-form>

            <el-form size="small" :model="form">
              <el-form-item label="分期金额：" :model="form" prop="stagesMoney">
                <span>{{ form.stagesMoney }}</span>
              </el-form-item>
              <!-- <el-form-item label="签约比例：" class="signInput">
                <el-input placeholder="签约比例" v-model="signRatio">
                  <template slot="append">%</template>
                </el-input>
                <el-button @click="updateSign">确定</el-button>
              </el-form-item> -->
              <!-- <span>{{ test || "无" }}</span> -->
              <el-form-item label="保证金:" class="signInput">
                <el-input
                  placeholder="保证金:"
                  v-model="test"
                  ref="ensureInput"
                  @input="iptChange($event)"
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <!-- <el-form-item label="手续费：" :model="form" prop="serviceCharge">
                <span>{{ form.serviceCharge || 0 }}</span>
              </el-form-item> -->
              <el-form-item
                label="合同号:"
                :model="form"
                prop="contractNum"
                style="width: 100%"
              >
                <el-input
                  v-model="form.contractNum"
                  placeholder="未填写合同号系统会生成"
                  style="width: 70%"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="代扣起始月"
                :model="form"
                prop="beginHoldMouth"
              >
                <el-date-picker
                  @change="monthFun"
                  v-model="form.beginHoldMouth"
                  value-format="yyyy-MM"
                  type="month"
                  placeholder="选择月"
                  :disabled="selectDisabled"
                >
                </el-date-picker>
                <!-- <span>{{ form.beginHoldMouth }}</span> -->
              </el-form-item>
              <el-form-item label="每月扣款日" :model="form" prop="withHoldDay">
                <el-select
                  v-model="form.withHoldDay"
                  filterable
                  placeholder="请选择"
                  no-data-text="请选择代扣起始月"
                  :disabled="selectDisabled"
                >
                  <el-option
                    v-for="item in dayArr"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="期数：" :model="form" prop="periodsNumber">
                <span>{{ form.periodsNumber }}</span>
              </el-form-item>
              <el-form-item label="本金：" :model="form" prop="principalMoney">
                <span>{{ form.principalMoney }}</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 第二步 -->
        <!-- 第一步未完成 -->
        <div class="sign_step sign_border sign_flex" v-if="!stepTwoShow">
          <div>
            <img class="notYet_img" src="../../assets/img/notYet.png" alt="" />
            <p class="notYet_p">暂无信息展示，请先完成第一步~</p>
          </div>
        </div>
        <!-- 第一步已完成 -->
        <div class="sign_step sign_border" v-if="stepTwoShow">
          <div>
            <p class="sign_Title">第二步：基本信息核对</p>
            <div class="two_header">
              <p class="two_Title">客户在线签约中心</p>
              <div class="two_content">
                <div class="two_text">
                  <p class="two_text_Title">
                    尊敬的{{ formData.name }}先生您好：
                  </p>
                  <p class="two_text_content">
                    您当前正在与我方完成“分期宝”产品代扣在线签约，请根据在线签约提醒完成以下信息的确认及操作。
                  </p>
                </div>
                <div class="two_img"></div>
              </div>
            </div>
            <div class="two_check">
              <p class="sign_check_Title">基本信息核对</p>
              <el-form>
                <el-form-item label="姓名：" :model="formData" prop="name">
                  <span>{{ formData.name }}</span>
                </el-form-item>
                <el-form-item label="身份证号" :model="formData" prop="idCard">
                  <span>{{ formData.idCard }}</span>
                </el-form-item>
                <el-form-item
                  label="手机号："
                  :model="formData"
                  prop="phoneNumber"
                >
                  <span>{{ formData.phoneNumber }}</span>
                </el-form-item>
                <el-form-item
                  label="代扣银行卡号："
                  :model="formData"
                  prop="bankCardNumber"
                >
                  <span>{{ formData.bankCardNumber }}</span>
                </el-form-item>
                <el-form-item
                  label="开户行："
                  :model="formData"
                  prop="bankDeposit"
                >
                  <span>{{ formData.bankDeposit }}</span>
                </el-form-item>
              </el-form>
              <p class="sign_check_Title">代扣信息核对</p>
              <el-form>
                <el-form-item
                  label="分期金额："
                  :model="formData"
                  prop="stagesMoney"
                >
                  <span>{{ formData.stagesMoney }}</span>
                </el-form-item>
                <!-- <el-form-item
                  label="手续费："
                  :model="formData"
                  prop="serviceCharge"
                >
                  <span>{{ formData.serviceCharge || 0 }}</span>
                </el-form-item> -->
                <el-form-item
                  label="代扣起始月"
                  :model="formData"
                  prop="beginHoldMouth"
                >
                  <span>{{ formData.beginHoldMouth }}</span>
                </el-form-item>
                <el-form-item
                  label="每月扣款日"
                  :model="formData"
                  prop="withHoldDay"
                >
                  <span>{{ formData.withHoldDay }}</span>
                </el-form-item>
                <el-form-item
                  label="期数："
                  :model="formData"
                  prop="periodsNumber"
                >
                  <span>{{ formData.periodsNumber }}</span>
                </el-form-item>
                <el-form-item
                  label="本金："
                  :model="formData"
                  prop="principalMoney"
                >
                  <span>{{ formData.principalMoney }}</span>
                </el-form-item>
              </el-form>
            </div>
            <!-- <el-button class="stepButton" @click="downloadFun">下载PDF</el-button> -->
          </div>
        </div>
        <!-- 第三步 -->
        <!-- 第二步未完成 -->
        <div class="sign_step sign_flex" v-if="!stepThreeShow">
          <div>
            <img class="notYet_img" src="../../assets/img/notYet.png" alt="" />
            <p class="notYet_p">暂无信息展示，请先完成第二步~</p>
          </div>
        </div>
        <!-- 第二部已完成 -->
        <div class="sign_step" v-if="stepThreeShow">
          <p class="sign_Title">第三步：远程监测签约过程（8秒后刷新）</p>
          <div class="block">
            <el-timeline>

              <el-timeline-item
                placement="top"
                v-for="(item,index) in  stepCon"
                :class="{ active: stepThreeCon[index] &&  stepThreeCon[index].signStatus}"
              >
                <div class="circular"></div>
                <el-card>
                  <p class="time">{{ stepThreeCon[index] ? stepThreeCon[index].updateTime : "" }}</p>
                  <h4 class="context">
                    {{ item.title
                    }}：{{ stepThreeCon[index] ? stepThreeCon[index].signStatus ? item.complete : item.incomplete : "未完成"
                    }}</h4>
                  <div v-if="stepThreeCon[index] && stepThreeCon[index].signStatus">
                    <el-button v-if="stepThreeCon[index].signProcess==1" class="stepButtonPdf" @click="downloadFun">
                      下载PDF
                    </el-button>
                    <el-button v-if="stepThreeCon[index].signProcess==2"
                               class="stepButton"
                               @click="onPreview(stepThreeCon[2].fileUrl)">预览
                    </el-button>
                    <el-button
                      class="stepButton" v-if="stepThreeCon[index].signProcess==3"
                      @click="onPrevideo(stepThreeCon[3].fileUrl)"
                    >预览
                    </el-button
                    >
                    <el-button v-if="stepThreeCon[index].signProcess==5"
                               class="stepButton"
                               @click="cancellationContract(0)"
                    >解约
                    </el-button
                    >
                    <el-button v-if="stepThreeCon[index].signProcess==8"
                               class="stepButton"
                               @click="cancellationContract(1)"
                    >解约
                    </el-button
                    >
                  </div>
                </el-card>
              </el-timeline-item>


              <!--              <el-timeline-item-->
              <!--                placement="top"-->
              <!--                :class="{ active: stepThreeCon[0] }"-->
              <!--              >-->
              <!--                <div class="circular"></div>-->
              <!--                <el-card>-->
              <!--                  <p class="time">{{ stepThreeCon[0].updateTime }}</p>-->
              <!--                  <h4 class="context">客户页面打开状态：已打开同时失效</h4>-->
              <!--                </el-card>-->
              <!--              </el-timeline-item>-->


              <!--              <el-timeline-item-->
              <!--                placement="top"-->
              <!--                :class="{ active: stepThreeCon[1] }"-->
              <!--              >-->
              <!--                <div class="circular"></div>-->
              <!--                <el-card>-->
              <!--                  <div v-if="stepThreeCon[1]">-->
              <!--                    <p class="time">{{ stepThreeCon[1].updateTime }}</p>-->
              <!--                    <h4 class="context">个人信息确认：完成</h4>-->
              <!--                    <el-button class="stepButtonPdf" @click="downloadFun"-->
              <!--                    >下载PDF-->
              <!--                    </el-button-->
              <!--                    >-->
              <!--                  </div>-->
              <!--                  <div v-else>-->
              <!--                    <h4 class="context">个人信息确认：未完成</h4>-->
              <!--                  </div>-->
              <!--                </el-card>-->
              <!--              </el-timeline-item>-->

              <!--              <el-timeline-item-->
              <!--                placement="top"-->
              <!--                :class="{ active: stepThreeCon[2] }"-->
              <!--              >-->
              <!--                <div class="circular"></div>-->
              <!--                <el-card>-->
              <!--                  <div v-if="stepThreeCon[2]">-->
              <!--                    <p class="time">{{ stepThreeCon[2].updateTime }}</p>-->
              <!--                    <h4 class="context">身份证识别：已完成</h4>-->
              <!--                    <el-button-->
              <!--                      class="stepButton"-->
              <!--                      @click="onPreview(stepThreeCon[2].fileUrl)"-->
              <!--                    >预览-->
              <!--                    </el-button-->
              <!--                    >-->
              <!--                  </div>-->
              <!--                  <div v-else>-->
              <!--                    <h4 class="context">身份证识别：未完成</h4>-->
              <!--                  </div>-->
              <!--                </el-card>-->
              <!--              </el-timeline-item>-->

              <!--              <el-timeline-item-->
              <!--                placement="top"-->
              <!--                :class="{ active: stepThreeCon[3] }"-->
              <!--              >-->
              <!--                <div class="circular"></div>-->
              <!--                <el-card>-->
              <!--                  <div v-if="stepThreeCon[3]">-->
              <!--                    <p class="time">{{ stepThreeCon[3].updateTime }}</p>-->
              <!--                    <h4 class="context">个人视频承诺：已完成</h4>-->
              <!--                    <el-button-->
              <!--                      class="stepButton"-->
              <!--                      @click="onPrevideo(stepThreeCon[3].fileUrl)"-->
              <!--                    >预览-->
              <!--                    </el-button-->
              <!--                    >-->
              <!--                  </div>-->
              <!--                  <div v-else>-->
              <!--                    <h4 class="context">个人视频承诺：未完成</h4>-->
              <!--                  </div>-->
              <!--                </el-card>-->
              <!--              </el-timeline-item>-->

              <!--              <el-timeline-item-->
              <!--                placement="top"-->
              <!--                :class="{ active: stepThreeCon[4] }"-->
              <!--              >-->
              <!--                <div class="circular"></div>-->
              <!--                <el-card>-->
              <!--                  <div v-if="stepThreeCon[4]">-->
              <!--                    <p class="time">{{ stepThreeCon[4].updateTime }}}</p>-->
              <!--                    <h4 class="context">代扣签约短信：已完成</h4>-->
              <!--                  </div>-->
              <!--                  <div v-else>-->
              <!--                    <h4 class="context">代扣签约短信：未完成</h4>-->
              <!--                  </div>-->
              <!--                </el-card>-->
              <!--              </el-timeline-item>-->
              <!--              <el-timeline-item-->
              <!--                placement="top"-->
              <!--                :class="{ active: stepThreeCon[5] }"-->
              <!--              >-->
              <!--                <div class="circular"></div>-->
              <!--                <el-card>-->
              <!--                  <div v-if="stepThreeCon[5]">-->
              <!--                    <p class="time">{{ stepThreeCon[5].updateTime }}</p>-->
              <!--                    <h4 class="context">银联签约提交：已完成</h4>-->
              <!--                    <el-button-->
              <!--                      class="stepButton"-->
              <!--                      @click="dialogVisiblejieyue = true"-->
              <!--                    >解约-->
              <!--                    </el-button-->
              <!--                    >-->
              <!--                  </div>-->
              <!--                  <div v-else>-->
              <!--                    <h4 class="context">银联签约提交：{{ chainText }}</h4>-->
              <!--                  </div>-->
              <!--                </el-card>-->
              <!--              </el-timeline-item>-->
              <!--              <el-timeline-item-->
              <!--                placement="top"-->
              <!--                :class="{ active: stepThreeCon[8] }"-->
              <!--              >-->
              <!--                <div class="circular"></div>-->
              <!--                <el-card>-->
              <!--                  <div v-if="stepThreeCon[5]">-->
              <!--                    <p class="time">{{ stepThreeCon[5].updateTime }}</p>-->
              <!--                    <h4 class="context">银盛签约提交：已完成</h4>-->
              <!--                    <el-button-->
              <!--                      class="stepButton"-->
              <!--                      @click="dialogVisiblejieyue = true"-->
              <!--                    >解约-->
              <!--                    </el-button-->
              <!--                    >-->
              <!--                  </div>-->
              <!--                  <div v-else>-->
              <!--                    <h4 class="context">银盛签约提交：{{ chainText }}</h4>-->
              <!--                  </div>-->
              <!--                </el-card>-->
              <!--              </el-timeline-item>-->
              <!--              <el-timeline-item-->
              <!--                placement="top"-->
              <!--                :class="{ active: stepThreeCon[6] }"-->
              <!--              >-->
              <!--                <div class="circular"></div>-->
              <!--                <el-card>-->
              <!--                  <div v-if="stepThreeCon[6]">-->
              <!--                    <p class="time">{{ stepThreeCon[6].updateTime }}}</p>-->
              <!--                    <h4 class="context">活体及真人识别：已完成</h4>-->
              <!--                  </div>-->
              <!--                  <div v-else>-->
              <!--                    <h4 class="context">活体及真人识别：未完成</h4>-->
              <!--                  </div>-->
              <!--                </el-card>-->
              <!--              </el-timeline-item>-->
              <!--              <el-timeline-item-->
              <!--                placement="top"-->
              <!--                :class="{ active: stepThreeCon[7] }"-->
              <!--              >-->
              <!--                <div class="circular"></div>-->
              <!--                <el-card>-->
              <!--                  <div v-if="stepThreeCon[7]">-->
              <!--                    <p class="time">{{ stepThreeCon[7].updateTime }}</p>-->
              <!--                    <h4 class="context">最后提交：已完成</h4>-->
              <!--                  </div>-->
              <!--                  <div v-else>-->
              <!--                    <h4 class="context">最后提交：未完成</h4>-->
              <!--                  </div>-->
              <!--                </el-card>-->
              <!--              </el-timeline-item>-->

              <el-image-viewer
                v-if="showViewer"
                :on-close="closeViewer"
                :url-list="imgUrl"
              />
            </el-timeline>
          </div>
          <el-input
            style="margin-top: 20px"
            type="textarea"
            :rows="4"
            placeholder="填写驳回原因:"
            v-model="rejectSignCon"
          >
          </el-input>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btn">
        <div class="sign_btn_flex">
          <el-button
            class="sign_btn"
            :disabled="generateDisabled"
            @click="generateProtocol"
          >生成协议及签约页面
          </el-button
          >
        </div>
        <div class="sign_btn_flex">
          <el-button
            class="sign_btn"
            v-if="stepTwoShow"
            @click="sendSMS"
            :disabled="btnDis"
          >{{ btnText }}
          </el-button
          >
        </div>
        <div class="sign_btn_flex">
          <el-button
            class="sign_btn"
            v-if="stepThreeShow"
            @click="rejectSignBtn"
          >驳回重签
          </el-button
          >
        </div>
      </div>
      <el-button
        type="primary"
        style="width: 28%; min-width: 240px; margin-top: 20px"
        :disabled="isDisabled"
        @click="signAgreeBtn"
      >同意签约，并立即生成分期表
      </el-button
      >
      <!--end 视频预览弹窗-->
      <el-dialog
        width="50%"
        title="视频预览"
        :visible.sync="innerVisible"
        append-to-body
        class="video_wrap"
        @close="closeDialog"
      >
        <video
          :src="videoFile"
          controls="controls"
          autoplay="autoplay"
          width="320"
          height="240"
        ></video>
      </el-dialog>
    </el-dialog>
    <!-- 确认驳回 -->
    <!-- <el-dialog title="提示" :visible.sync="dialogVisiblereject" width="30%">
      <span>此签约已驳回，如需分期请重新申请签约。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rejectFun = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
    <el-dialog
      title="提示"
      :show-close="false"
      :visible.sync="dialogVisiblereject"
    >
      <span>{{ rejectContent }}</span>
      <el-dialog
        width="30%"
        title="提示"
        :visible.sync="innerReject"
        append-to-body
        :show-close="false"
      >
        <span>此签约已驳回，如需分期请重新申请签约。</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="rejectFun">确 定</el-button>
        </span>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblereject = false">取 消</el-button>
        <el-button type="primary" v-if="rejectShow" @click="rejectSignFun"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
    <!-- 确认解约 -->
    <el-dialog
      title="解约提示"
      :show-close="false"
      :visible.sync="dialogVisiblejieyue"
    >
      <span>此签约一旦解约，需重新申请签约。</span>
      <el-dialog
        width="30%"
        title="提示"
        :visible.sync="innerjieyue"
        append-to-body
        :show-close="false"
        @close="closeDialogT"
      >
        <span>此签约已解约，如需分期请重新申请签约。</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="jieyueFun">确 定</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisiblejieyue = false"
        >取 消</el-button
        >
        <el-button type="primary" @click="jieyuePayBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSignGenerate,
  getSignBasic,
  getSignFind,
  getSignFindProcess,
  getSignBank,
  postBankInfo,
  singNote,
  chinaPay,
  unlockPay,
  rejectSign,
  signAgree,
  getSign,
  getIsSign,
  financingPoints,
  checkSign,
  sendSignLink,
  process,
  retract
} from "../../../src/assets/js/api";
import { downloadFile } from "../../assets/js/utlis";
// 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  name: "signUp",
  components: { ElImageViewer },
  props: ["orderNumber", "deposit"],
  data() {
    return {
      haveBank: false,
      dialogBank: false,
      dialogVisible: false,
      stepTwoShow: false,
      stepThreeShow: false,
      // signRatio: null,
      form: {
        // signRatio: null,
        ensureRatio: null
      },
      formData: {},
      formBank: {
        bankType: null,
        bankNum: null
      },
      dayArr: [],
      id: "",
      imgUrl: [],
      videoFile: "",
      showViewer: false,
      stepCon: [
        {
          title: "客户页面打开状态",
          complete: "已打开同时失效",
          incomplete: "",
          code: 0
        },
        {
          title: "个人信息确认",
          complete: "已完成",
          incomplete: "未完成",
          code: 1
        },
        {
          title: "身份证识别",
          complete: "已完成",
          incomplete: "未完成",
          code: 2
        },
        {
          title: "个人视频承诺",
          complete: "已完成",
          incomplete: "未完成",
          code: 3
        },
        {
          title: "代扣签约短信",
          complete: "已完成",
          incomplete: "未完成",
          code: 4
        },
        {
          title: "银联签约提交",
          complete: "已完成",
          incomplete: "未完成",
          code: 5
        },
        {
          title: "银盛签约提交",
          complete: "已完成",
          incomplete: "未完成",
          code: 8
        },
        {
          title: "活体及真人识别",
          complete: "已完成",
          incomplete: "未完成",
          code: 6
        },
        {
          title: "最后提交",
          complete: "已完成",
          incomplete: "未完成",
          code: 7
        }
      ],
      stepThreeCon: [],
      //定时器开关
      timer: null,
      dingshiqi: true,
      btnDis: false,
      btnText: "短信发送签约界面",
      innerVisible: false,
      rejectSignCon: null,
      chainText: "未完成",
      whetherSign: "",
      dialogVisiblereject: false,
      dialogVisiblejieyue: false,
      innerReject: false,
      rejectContent: "",
      innerjieyue: false,
      generateDisabled: false,
      selectDisabled: false,
      rejectShow: false,
      signingTime: "",
      test: null,
      channel:'' ,// 银联：0 银盛：1
    };
  },
  created() {
    this.whetherSignPart();
    this.getSignBank();
  },
  computed: {
    isDisabled: function() {
      return this.stepThreeCon[5] ? false : true;
    }
  },
  beforeDestroy() {
    this.eightSecend("end");
  },
  watch: {
    stepThreeCon: {
      handler(val) {
        if (val.length >= 9) {
          this.eightSecend("end");
        }
      },
      deep: true,
      immediate: true
    },
    dialogVisible: {
      handler(val) {
        if (!val) {
          this.eightSecend("end");
        }
      },
      deep: true,
      immediate: true
    },
    deposit: {
      handler(val) {
        this.depositmes(val);
      }
    }
  },
  methods: {
    //解约
    cancellationContract(type){
      this.channel=type;
      this.dialogVisiblejieyue=true;
      this.generateDisabled = false;


      // this.stepTwoShow = false;
      // this.stepThreeShow = false;
      // this.dingshiqi = true;
      // this.selectDisabled = false;

    },
    iptChange(e) {
      // this.form.ensureRatio = e;
      this.form.margin = e;
      this.$forceUpdate();
    },
    // 保证金比例回显!
    depositmes(data) {
      this.$nextTick(() => {
        // this.form.ensureRatio = data;
        this.form.margin = data;
        this.$forceUpdate();
      });
    },
    // 下载PDF
    downloadFun() {
      downloadFile(
        "get",
        `/sys/sign/download/${this.id}`,
        "代扣委托合同", // 导出文件名字
        "pdf"
      );
    },
    // 查看合同
    viewContract() {
    },
    // // 查看是否签约
    whetherSignPart() {
      getSign(this.orderNumber).then((res) => {
        this.whetherSign = res.data.completeStatus;
        this.signingTime = res.data.updateTime;
      });
    },
    //同意签约，并立即生成分期表
    signAgreeBtn() {
      signAgree(this.id).then((res) => {
        if (res.code == 200) {
          this.whetherSignPart();
          this.dialogVisible = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //提交签约
    async chinaPayBtn() {
      let { code, message } = await chinaPay(this.id);
      if (code !== 200) {
        return;
      }
      this.$message.success(message);
      this.stepThreeCon[7].signStatus = 1;
      this.chainText = "已完成";
    },
    //提交解约
    jieyuePayBtn() {
      retract(this.channel,this.id).then((res) => {
        if (res.code == 200) {
          this.innerjieyue = true;
          console.log('res:',res)
          this.$message.success(res.message);

          if(this.channel==0){
            this.stepThreeCon[5].signStatus = 0;
          }else {
            this.stepThreeCon[6].signStatus = 0;
          }
          this.stepThreeCon[8].signStatus = 0;
          this.chainText = "未完成";
          console.log(this.stepThreeCon[5])
        }
      });
    },
    // 解约完成
    jieyueFun() {
      this.innerjieyue = false;
      this.dialogVisiblejieyue = false;
      // if( !this.stepThreeCon[5].signStatus &&  !this.stepThreeCon[6].signStatus){
      //   this.dialogVisible = false;
      // }

    },
    rejectSignBtn() {
      getIsSign(this.id).then((res) => {
        this.dialogVisiblereject = true;
        if (res.code == 200 && res.data == true) {
          this.rejectShow = true;
          this.rejectContent = "此签约一旦解约，需重新申请签约。";
          this.rejectDisabled = false;
        } else {
          this.rejectDisabled = true;
          this.rejectContent = "请先完成签约。";
        }
      });
    },
    //填写驳回原因
    async rejectSignFun() {
      let obj = {};
      obj.rejectText = this.rejectSignCon;
      obj.signUpId = this.id;
      let { message, code } = await rejectSign(obj);
      if (code != 200) {
        this.$message.error(message);
        return;
      }
      this.eightSecend("end");
      this.$message.success(message);
      this.innerReject = true;
    },
    // 驳回完成
    rejectFun() {
      this.innerReject = false;
      this.dialogVisiblereject = false;
      this.dialogVisible = false;
    },
    //预览图片
    onPreview(obj) {
      this.imgUrl[0] = obj;
      this.showViewer = true;
    },
    //预览视频
    onPrevideo(obj) {
      this.videoFile = obj;
      this.innerVisible = true;
    },
    closeDialog() {
      this.videoFile = "";
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false;
    },
    //获取是否填写银行卡信息
    getSignBank() {
      getSignBank({ orderNumber: this.orderNumber }).then((res) => {
        this.haveBank = res.data;
      });
    },
    getList(obj) {
      getSignBasic(obj).then((res) => {
        this.form = res.data;
        this.test = res.data.margin;
        this.selectDisabled = false;
        let d = new Date();
        this.form.beginHoldMouth = d.getFullYear() + "-" + (d.getMonth() + 1);
        this.form.withHoldDay = d.getDate();
        let day = this.getDateByMon(d.getFullYear(), d.getMonth() + 1);
        for (let i = 1; i <= day; i++) {
          this.dayArr[i] = i;
        }
      });
    },
    //点击打卡填写银行卡弹窗
    openBank() {
      this.dialogBank = true;
    },
    openSgin() {
      this.dialogVisible = true;
      // this.$nextTick(() => {
      //   // this.form.ensureRatio = this.deposit;
      //   // this.form.ensureRatio = this.deposit;
      //   // this.test = this.deposit;
      //
      // });
      this.getList({ orderNumber: this.orderNumber });
      // financingPoints(this.orderNumber).then((res) => {
      //   this.signRatio = res.data;
      //   // this.form.signRatio = res.data;
      //   // console.log(this.form.signRatio, "123");
      // });
    },
    closeDialogT() {
      console.log("关闭弹窗");
    },
    //修改签约比例
    // updateSign() {
    //   let obj = {
    //     orderNumber: this.orderNumber,
    //     signRatio: this.signRatio,
    //   };
    //   this.getList(obj);
    // },
    generateProtocol() {


      // this.form.ensureRatio = this.test;
      this.form.orderNumber = this.orderNumber;
      this.form.margin = this.test;
      // this.form.signRatio = this.signRatio;
      //先检查是否签约过了
      checkSign(this.form.orderNumber).then(res => {
        getSignGenerate(this.form).then((res) => {
          if (res.code == 200) {
            this.selectDisabled = true;
            this.id = res.data;
            getSignFind(this.id).then((resp) => {
              if (resp.code == 200) {
                this.stepTwoShow = true;
                this.formData = resp.data;
              }
            });
          }
        });


      });


    },
    //发送短信签约
    async sendSMS() {
      this.generateDisabled = true;
      // let { code } = await singNote(this.id);
      let { code } = await sendSignLink(this.id);
      if (code != 200) {
        return;
      }
      this.eightSecend("start");
      this.dingshiqi = false;
      process(this.id).then((res) => {
        this.stepThreeCon = res.data;
        this.stepThreeShow = true;
        this.countDown();
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          // this.eightSecend("end");
          this.stepTwoShow = false;
          this.stepThreeShow = false;
          this.dingshiqi = true;
          this.selectDisabled = false;
          this.generateDisabled = false;
          done();
        })
        .catch(() => {
        });
    },
    //八秒钟定时器开启
    eightSecend(obj) {
      let that = this;
      if (this.dingshiqi && obj == "start") {
        that.timer = setInterval(function() {
          process(that.id).then((res) => {
            let obj = JSON.parse(JSON.stringify(res.data));
            that.stepThreeCon = obj;
          });
        }, 8000);
      } else if (obj == "end") {
        clearInterval(that.timer);
        return;
      }
    },
    //银行卡号弹窗关闭
    handleCloseBank(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.dialogBank = false;
          done();
        })
        .catch(() => {
        });
    },
    //提交银行卡号
    async bankSign() {
      let postObj = JSON.parse(JSON.stringify(this.formBank));
      postObj.orderNumber = this.orderNumber;
      let { code, message } = await postBankInfo(postObj);
      if (code != 200) {
        return;
      }
      this.$message.success(message);
      this.dialogBank = false;
      this.haveBank = true;
    },
    monthFun() {
      let year = this.form.beginHoldMouth.slice(0, 4);
      let month = this.form.beginHoldMouth.slice(5);
      let day = this.getDateByMon(year, month);
      for (let i = 1; i <= day; i++) {
        this.dayArr[i] = i;
      }
    },
    //获取指定月份天数
    getDateByMon(year, month) {
      let d = new Date(year, month, 0);
      return d.getDate();
    },
    // 验证码倒计时
    countDown() {
      let t = null;
      let timer = 60;
      this.btnDis = true;
      clearInterval(t);
      this.btnText = `稍后发送签约界面 ${timer}s`;
      t = setInterval(() => {
        if (timer == 0) {
          clearInterval(t);
          this.btnText = "重新发送签约界面";
          this.btnDis = false;
          return;
        }
        timer--;
        this.btnText = `稍后发送签约界面 ${timer}s`;
      }, 1);
    }
  }
};
</script>

<style scoped type="less">
.sign {
  margin-top: 50px;
}

.sign p {
  font-size: 14px;
  margin-bottom: 20px;
}

::v-deep .el-dialog__header {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  color: #343434;
}

.dialog {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  height: calc(100% - 130px);
}

.btn {
  display: flex;
  justify-content: space-between;
}

.sign_btn_flex {
  flex: 1;
}

::v-deep .dialog_sign .el-dialog {
  overflow: hidden;
  height: 80%;
  margin-top: 5% !important;
}

.dialog_sign ::v-deep .el-dialog__body {
  box-sizing: border-box;
  height: calc(100% - 55px);
}

.sign_step {
  overflow-y: auto;
  flex: 1;
  padding: 30px 20px 10px 20px;
}

.sign_flex {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.dialog_sign .el-dialog__body {
  padding: 0 0 30px 0;
}

.dialog_sign .el-form {
  margin-top: 15px;
  padding: 10px;
  background-color: #f8f8f8;
}

.sign_border {
  overflow: hidden;
  overflow-y: auto;
  border-right: 2px #dedede solid;
  border-left: 2px #dedede solid;
}

.sign_Title {
  font-family: PingFang SC;
  font-size: 15px;
  font-weight: bold;
  line-height: 25px;
  text-align: left;
  color: #343434;
}

::v-deep .el-form-item__label {
  color: #343434;
}

::v-deep .el-form-item__content {
  color: #343434;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

.form_p {
  font-size: 14px;
  margin-top: 10px;
  text-align: left;
  color: #9a9a9a;
}

.sign_btn {
  margin-top: 40px;
  color: #343434;
  border: 1px #343434 solid;
}

.sign_btn:hover {
  background: transparent;
}

.sign_btn:focus {
  background: transparent;
}

.notYet_p {
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  color: #343434;
}

.notYet_img {
  width: 154px;
  height: 154px;
}

.two_header {
  position: relative;
  width: 100%;
  height: 210px;
  margin-top: 15px;
  background: url(../../assets/img/backgroundSign.png) no-repeat;
  background-size: 100% 100%;
}

.two_Title {
  font-family: Microsoft YaHei;
  font-size: 20px;
  font-weight: bold;
  margin: 0 20px;
  padding-top: 20px;
  text-align: left;
  color: #fff;
}

.two_content {
  position: absolute;
  bottom: 0;
  width: calc(100% - 40px);
  height: 140px;
  margin: 0 20px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 0 36px 4px rgba(0, 0, 0, .03);
}

.two_text {
  width: 259px;
  margin: 20px 0 0 20px;
}

.two_text_Title {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px;
  text-align: left;
  color: #343434;
}

.two_text_content {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-indent: 2em;
  color: #343434;
}

.two_img {
  position: absolute;
  right: 13px;
  bottom: 0;
  width: 90px;
  height: 70px;
  background: url(../../assets/img/peopleSign.png) no-repeat;
  background-size: 100% 100%;
}

.sign_check_Title {
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  text-align: left;
  color: #343434;
}

.check_form {
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 0 36px 4px rgba(0, 0, 0, .03);
}

.block {
  margin-top: 15px;
  padding: 30px 20px 20px 18px;
  background-color: #f8f8f8;
}

::v-deep .el-timeline-item__wrapper {
  top: -25px;
  padding-left: 22px;
}

::v-deep .el-timeline-item__timestamp.is-top {
  margin: 0;
  padding: 0;
}

::v-deep .el-card.is-always-shadow {
  border: none;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

::v-deep .el-card__body {
  padding: 15px 13px;
  text-align: left;
}

.video_wrap ::v-deep .el-dialog__body {
  text-align: center;
}

.time {
  color: #999;
}

.context {
  font-size: 14px;
  color: #333;
}

.stepButton {
  width: 48px;
  height: 22px;
  padding: unset;
  color: #52aaf8;
  border: 1px solid #52aaf8;
  border-radius: 4px;
  background: #edf6fe;
}

.stepButtonPdf {
  width: 70px;
  height: 22px;
  padding: unset;
  color: #52aaf8;
  border: 1px solid #52aaf8;
  border-radius: 4px;
  background: #edf6fe;
}

.active ::v-deep .el-timeline-item__node {
  background-color: #52aaf8;
}

::v-deep .el-timeline-item__node {
  position: relative;
}

.active ::v-deep .el-timeline-item__tail {
  border-left: 2px solid #52aaf8;
}

.circular {
  position: absolute;
  top: 16px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 25px;
  background-color: #fff;
}


</style>
